<template>
  <view>
    <view class="content fl-c-c" style="height: 100vh">
      <view class="head">
        <baseHead
          :title="title"
          :right="true"
          text_right="保存"
          @clickRight="clickRight"
        ></baseHead>
        <view class="sel fl-lr-c">
          <view> 已选行业 </view>
          <view>
            <text>{{ count }}</text
            >/{{ max }}
          </view>
        </view>
      </view>
      <view class="head-h"></view>
      <view style="flex: 1; width: 100%" class="view-scroll">
        <long-categories
          ref="categories"
          :key="screen"
          :list="list"
          :maxSelected="max"
          @change="change"
        >
        </long-categories>
      </view>

      <view style="width: 100%; height: 110rpx; flex-shrink: 0"></view>
      <view class="bottom-sel fl-t">
        <view class="a_sel">已选</view>
        <scroll-view :scroll-x="true" class="scroll-view">
          <view class="fl-t" style="height: 100%">
            <view class="view" v-for="(item, index) in selList" :key="index">
              <view class="text"> {{ item.text }}</view>
              <u-icon
                name="close-circle-fill"
                color="#FFFFFF"
                top="1"
                @click="define(item, index)"
              ></u-icon>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import longCategories from "@/pages/component/long-categories/long-categories.vue";
import baseHead from "@/pages/component/baseHead.vue";
export default {
  data() {
    return {
      title: "行业",
      list: [], //总数据
      selList: [],
      count: 0,
      max: 3,
      xzho: "",
      datalist: "",
      screen: 1,
    };
  },
  onLoad(o) {
    this.xzho = JSON.parse(o.hyVal);
    // 期望行业
    this.$http.dic.coreSelector(366287052411013).then((res) => {
      if (res.Success) {
        this.datalist = this.subTree(res.Result);
        this.arguments();
      }
    });
  },
  components: {
    longCategories,
    baseHead,
  },
  methods: {
    //树形结构数据
    subTree(arr, fatherArr) {
      let totalArr;
      if (fatherArr !== undefined) {
        totalArr = fatherArr.children;
      } else {
        totalArr = [];
      }
      arr.forEach((item, index) => {
        let obj = {};
        obj.text = item.FullName;
        obj.value = item.Id;
        obj.children = [];
        if (item.Children !== null && item.Children.length != 0) {
          this.subTree(item.Children, obj);
        }
        totalArr.push(obj);
      });
      return totalArr;
    },
    arguments() {
      this.datalist.forEach((res) => {
        if (res.children) {
          res.children.forEach((res2) => {
            res2.checked = false;
            this.xzho.forEach((item3) => {
              if (item3.value == res2.value) {
                res2.checked = true;
              }
            });
          });
        }
      });

      this.list = this.datalist;
      // console.log(this.datalist)
      this.screen += 1;
      // console.log(this.screen)
    },
    clickRight() {
      uni.$emit("getHangyeSel", this.selList);
      uni.navigateBack();
    },
    change(data) {
      this.count = data.length;
      this.selList = data;
      // console.log('12345545454', data)
    },
    define(item, index) {
      this.xzho = this.selList.splice(index, 1);
      this.xzho = this.selList;
      // this.list.splice( index,1)
      this.arguments();
    },
  },
};
</script>


<style lang="scss">
.view-scroll {
  height: calc(330rpx + var(--status-bar-height));
}
.sel {
  padding: 30rpx;
  font-size: 42rpx;
  font-weight: 500;
  margin: 10rpx 0 2px;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.head-h {
  width: 100%;
  height: calc(230rpx + var(--status-bar-height));
  flex-shrink: 0;
}

.head {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
}

.bottom-sel {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;

  .a_sel {
    padding-right: 20rpx;
    flex-shrink: 0;
  }

  .scroll-view {
    flex: 1;
    height: 100%;
  }

  .view {
    width: auto;
    background-color: #1684fc;
    font-size: 28rpx;
    color: #fff;
    flex-shrink: 0;
    padding: 10rpx;
    margin: 0 20rpx;
    border-radius: 10rpx;
    display: flex;

    .text {
      margin-right: 10rpx;
    }
  }
}
</style>
